// var
@book-prefix-cls            : x-book;
@book-font-weight           : normal;
@book-font-size             : 14px;
@book-color-bg              : #fffff9;
@book-color-icon-h5         : #ea3223;
@book-color-icon-doc        : #ffaf03;
@book-color-icon-video      : #8000FF;
@book-color-icon-audio      : #007aff;
@book-color-icon-flash      : #ff2c3a;
@book-color-icon-ppt        : #ff7317;
@book-color-icon-image      : #4ac23f;
@book-color-hotspots-bg     : rgba(68, 133, 244, 0.14902);
@book-color-hotspots-border : #99bdfa;

// mixins

// styles
.@{book-prefix-cls} {
  width: 840px;
  height: 594px;
  font-size: @book-font-size;
  font-weight: @book-font-weight;
  user-select: none;
  position: relative;
  perspective: 2000px;
  transform-style: preserve-3d;
  transition: all .5s linear;
  &__page {
    position: absolute;
    top: 0;
    right: 0;
    width: 420px;
    height: 594px;
    border: 1px solid tint(@grey-color,75%);
    transform-style: preserve-3d;
    transform-origin: 0% 100%;
    transform: translate3d(0, 0, 1px) rotateY(-180deg);
    transition-property: transform;
    transition-duration: .5s;
    transition-timing-function: linear;
    &.active,
    &.active ~ & {
      transform: translate3d(0, 0, 1px) rotateY(0deg);
    }
    &_child {
      .absolute-fullscreen;
      backface-visibility: hidden;
      background-color: @book-color-bg;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      box-shadow: inset 4px 0 10px fade(@grey-color,10%);
      transform-style: preserve-3d;
      &_canvas,
      &_img {
        .absolute-fullscreen;
        width: 100%;
        height: 100%;
      }
      &_img {
        object-fit: contain;
      }
      &_hotspot {
        position: absolute;
        border: 1px solid @book-color-hotspots-border;
        background-color: @book-color-hotspots-bg;
        cursor: pointer;
      }
      &_attachment {
        position: absolute;
        width: @book-font-size * 2;
        height: @book-font-size * 2;
        cursor: pointer;
        .flex-center;
        i {
          font-size: @book-font-size * 2;
          &.xvu-file-h5 {color: @book-color-icon-h5;}
          &.xvu-file-doc {color: @book-color-icon-doc;}
          &.xvu-file-video {color: @book-color-icon-video;}
          &.xvu-file-audio {color: @book-color-icon-audio;}
          &.xvu-file-flash {color: @book-color-icon-flash;}
          &.xvu-file-ppt {color: @book-color-icon-ppt;}
          &.xvu-file-image {color: @book-color-icon-image;}
        }
        &&-hotspots {
          border: 1px solid @book-color-hotspots-border;
          background-color: @book-color-hotspots-bg;
        }
      }
    }
    &_front {
      z-index: 2;
    }
    &_back {
      z-index: 1;
      transform: rotateY(180deg);
    }
  }
  &-static {
    .@{book-prefix-cls}__page {
      &_front {
        visibility: hidden;
      }
      &.active, &.active + & {
        .@{book-prefix-cls}__page_front {
          visibility: visible;
        }
      }
    }
  }
  &__empty {
    .absolute-transform-center;
    font-size: @book-font-size;
    line-height: 1.1;
    color: tint(@grey-color, 50%);
    .xvu-iconfont {
      font-size: 4em;
    }
  }
  &-single {
    .@{book-prefix-cls}__page {
      transform: translate3d(0, 0, 1px) rotateY(-270deg);
      &.active,
      &.active ~ & {
        transform: translate3d(0, 0, 1px) rotateY(0deg);
      }
    }
  }
  &.high-performance {
    .@{book-prefix-cls}__page {
      display: none;
      &_child_attachment {
        opacity: 0;
        visibility: hidden;
        transition: opacity .5s ease;
      }
      &.active-region-old {
        display: block;
      }
      &.page-first,
      &.page-last {
        display: block;
        canvas,
        img {
          visibility: hidden;
        }
      }
    }
    &.@{book-prefix-cls}-static {
      .@{book-prefix-cls}__page {
        &.active-region {
          display: block;
          .@{book-prefix-cls}__page_child_attachment {
            opacity: 1;
            visibility: visible;
          }
        }
        &.page-first,
        &.page-last {
          canvas,
          img {
            visibility: visible;
          }
        }
      }
      // 修复了单页模式-翻页过程中，最后一页闪现的问题
      &.@{book-prefix-cls}-single {
        .@{book-prefix-cls}__page {
          &.page-first:not(.active),
          &.page-last:not(.active) {
            canvas,
            img {
              visibility: hidden;
            }
          }
        }
      }
    }
  }
}

// styles - more
